<template>
<div class="all" style="height: 900px;" v-wechat-title="this.title">
  <div class="a-layout-header">
    <div class="a-layout-header-img">
      <img src="@/assets/顶部-中信建投LOGO.png">&#12288;
      <img src="@/assets/顶部-分割线.png">&#12288;
      <strong style="font-size:17px">大类资产配置平台</strong>　
      <span>欢迎&nbsp;{{accountName}}&nbsp;
        <img src="@/assets/顶部-分割线.png">&nbsp;
        <a href="javascript:" @click="goBack">退出</a>
      </span>
    </div>
  </div>
  <div class="all-text">
    <div class="a-layout-content-tabs-d">
      <span>资产配置</span>&#12288;
      <a-icon type="right" />&#12288;<span>研报详情</span>
    </div>
    <div class="all-text-center" style=" overflow-y:scroll">
      <div class="a-layout-footer-t">
        <div class="a-layout-footer-left">
          <div class="a-layout-footer-header">
            <span>
              <a-icon type="file-text" :style="{ fontSize: '16px', color: '#08c' }" /> {{docTitle}}</span>
          </div>
          <div class="all-divider">
            <a-divider />
          </div>
          <div class="a-layout-footer-center">
            <div class="a-layout-footer-center-header">
              <div class="center-header-p">
                <p>{{dataSource.title}}</p>
                <!-- {{moment().format('YYYY-MM-DD')}} -->
              </div>
              <div class="center-header-s">
                <span  class='fz-au'>{{moment(dataSource.createTime).format('YYYY-MM-DD')}}</span>
                <span class='fz-au'>{{name}}</span>
              </div>
            </div>
            <div class="a-layout-footer-center-center">
              <div class="zhaiyao">
                <span :style="{ fontSize: '15px' }">摘要</span>
                <p>{{dataSource.digest}}</p>
              </div>
            </div>
          </div>
          <div class="a-layout-footer-footer">
            <el-button size="mini" round @click="showModal">
              <a-icon type="cloud-download" :style="{ fontSize: '16px', color: '#08c' }" />下载</el-button>
          </div>
        </div>
        <div class="a-layout-footer-right" style="height: 800px; overflow-y:scroll">
          <div v-if="noData">
            <!--<pdf v-for="i in numPages" :key="i" :src="src" :page="i" class="pdf-set"></pdf>  -->
            <canvas v-for="i in numPages-1" :key="i" :id="'the-canvas'+i" style="width:100%;height:100%"> </canvas>
          </div>
          <div class="noData" v-if="!noData">
            <span>网络或系统错误，请稍后重试！</span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <modal ref="modal" @close="close" @confirm="confirm">
    <!-- 点击下载填充modal的slot -->
    <div v-if="modalType==='send'" class="content" slot="body">
      <div class="modal-text" @click="send">
        <span>
          <a-icon type="mail" :style="{ fontSize: '16px', color: '#08c' }" /> 发送至邮箱</span>
      </div>
      <div class="modal-text-two" @click="copy">
        <span class="copy-btn" v-clipboard:copy="src" v-clipboard:success="onCopy" v-clipboard:error="onError">
          <a-icon type="copy" :style="{ fontSize: '16px', color: '#08c' }" /> 复制下载链接</span>
      </div>
    </div>
    <!-- 点击发送至邮箱填充modal的slot -->
    <div v-else class="content" slot="body">

      <div class="text">
        <span>该研报将发送至您预留的{{email}}邮箱，点击确认直接发送</span>
      </div>

      <div class="text-two">
        <span>
          <font color="gray">或发送至下面邮箱</font>
        </span>
        <a-input placeholder="请填写其他邮箱" v-model="emailOther" />
      </div>

    </div>
  </modal>
</div>
</template>

<script>
import moment from 'moment'
import pdf from 'vue-pdf'
import pdfJS from 'pdfjs-dist'
import modal from '@/modal/Modal'
import VueEvent from '@/components/utilJs/ByValue'
import '@/style/Details.css'
export default {
  components: {
    pdf,
    modal
  },
  data() {
    return {
      email: 'ceshi@email',
      emailTitle: "",
      noData: true,
      accountName: '',
      numPages: undefined,
      src: '', // pdf文件地址
      title: '',
      pdfUrl:'',
      emailOther: '',
      dataSource: {},
      modalType: "",
      isModalVisible: false,
      moment,
      showCancle: true,
      showConfirm: true,
      // dataSource: {},
      name: "",
      toKen: '',
      newPdf: null,
      submitters: '',
      docTitle:"",
      submitter: {
        'user': 'CSC99999',
        'department': 'b',
        'group': 'c',
        'role': 'd',
        'post ': 'e'
      },
      id: '',

    }
  },
  created() {
    this.accountName = sessionStorage.getItem('accountName')
    this.email = sessionStorage.getItem('email')
    this.docTitle=this.$route.query.title
    console.log(this.docTitle)
    this.$http.get(this.$url.reportUrl + "/" + this.$route.query.id).then(res => {
   
      this.dataSource = res;
      this.id = res.fmsId
      this.submitters=res.submitter
      // this.canvas = document.getElementById('the-canvas')
      //设置pdf   id
      //  if(res.reportPdfId!=null){
      //    this.id=res.reportPdfId
      //  }else{
      //    if(res.reportFileId!=null){
      //        this.id=res.reportFileId
      //    }
      //  }
      //设置  标题
      this.title = "资产配置研报-" + res.title
      this.emailTitle = res.title
      // this.title = "资产配置研报-" + res.title
      this.name = this.$route.query.name;
    });
    //get token
    // this.$http.post(this.$url.toKenUrl,{}).then(res=>{
    //  this.toKen=res;
    // })

  },
  watch: {
    //初始化加载文件
    id(id) {
      if (id != "") {
        this.noData = true
        var _that = this
        //get token
        this.$http.post(this.$url.toKenUrl, {}).then(res => {
          if (res.code == "1") {
            //this.toKen=res.data;
            this.noData = true
            let getFileData = {
              "token": res.data,
              "fmsId": this.id,
              "isPDF": 1,
              "employeeid": this.submitters,
              "employeename": "王士明",
              "fileName": "testFile.doc"
            }

            // this.$http.post(this.$url.newfileUrl+"?token="+res.data+"&fmsId="+this.id+"&isPDF=1&employeeid=CSC00660&employeename=王士明&fileName=testFile.doc").then(res=>{
            this.$http.post(this.$url.newPdfUrl, getFileData, {
              responseType: 'blob'
            }).then(res => {
              console.log(res)
              var blob = new Blob([res])

              // let url = window.URL.createObjectURL(blob)
              // 线上地址
              let url = `static/pdf/${this.id}.pdf`
              this.pdfUrl=`${this.id}.pdf`
              // 线下测试地址
              // let url = `static/hangqing1.pdf`

            
              var urlPath = window.document.location.href; //浏览器显示地址 http://10.15.5.83:5555/ISV/demo.aspx?a=1&b=2
              var docPath = window.document.location.pathname; //文件在服务器相对地址 /ISV/demo.aspx
              var index = urlPath.indexOf(docPath);
              var serverPath = urlPath.substring(0, index);

              this.src = serverPath + '/asset/' + url
              // var reader = new FileReader();
              // reader.readAsText(blob, 'utf-8')// 转文本
              //  reader.readAsArrayBuffer(blob);
              pdfJS.getDocument(url).then(function (pdf) {
                _that.noData = true
                _that.numPages = pdf.numPages
                for (let i = 1; i < pdf.numPages; i++) {
                  pdf.getPage(i).then(function (page) {

                    var scale = 1.3;
                    var viewport = page.getViewport(scale);
                    var canvas = document.getElementById('the-canvas' + i);
                    var context = canvas.getContext('2d');

                    canvas.height = viewport.height;
                    canvas.width = viewport.width;
                    var renderTask = page.render({
                      canvasContext: context,
                      viewport: viewport
                    });

                  });
                }

              }).catch(function (err) {

                _that.noData = false

              });

            })
          } else {
            this.noData = false
            this.$message.error(res.msg);
          }

        })
      }
    }
  },
  mounted() {
    //获取数据
    console.log(this.$route.query.id)
    // this.$http.get(this.$url.reportUrl + "/" + this.$route.query.id).then(res => {
    //   console.log(res)
    //   this.dataSource = res;
    //   this.id = res.fmsId
    //   this.submitters=res.submitter
    //   // this.canvas = document.getElementById('the-canvas')
    //   //设置pdf   id
    //   //  if(res.reportPdfId!=null){
    //   //    this.id=res.reportPdfId
    //   //  }else{
    //   //    if(res.reportFileId!=null){
    //   //        this.id=res.reportFileId
    //   //    }
    //   //  }
    //   //设置  标题
    //   this.title = "资产配置研报-" + res.title
    //   // this.title = "资产配置研报-" + res.title
    //   this.name = this.$route.query.name;
    // });

    // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
    //this.src = pdf.createLoadingTask(this.src);
    // this.data=this.$route.params.data;
    // if (this.noData) {
    //   this.src.then(pdf => {
    //     this.numPages = pdf.numPages;
    //   });
    // }

  },
  computed: {

    // title() {
    //   return this.$store.state.count
    // },
    textname() {
      return this.$store.state.detailsData.textname
    },
    date() {
      return this.$store.state.detailsData.count
    }
  },

  methods: {
    async loadPdfHandler() {
      //src为你服务器上存放pdf的路径
      this.pdfUrl = pdf.createLoadingTask(this.src);
      this.pdfUrl.then(pdf => {
        this.numPages = pdf.numPages
      })
    },

    change1() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    },
    change2() {
      if (this.currentPage < this.pageCount) {
        this.currentPage++
      }
    },
    showModal() {
      this.$refs.modal.show = true;
      this.$refs.modal.title = "选择下载方式"
      this.modalType = "send";
    },
    send() {
      this.$refs.modal.close();
      this.$refs.modal.show = true;
      this.$refs.modal.title = "发送至邮箱"
      this.$refs.modal.showConfirm = this.showConfirm
      this.$refs.modal.showCancle = this.showCancle
      this.modalType = "";
    },
    copy() {},
    close() {
      this.$refs.modal.showConfirm = false
      this.$refs.modal.showCancle = false
      this.$refs.modal.show = false;
    },
    confirm() {
      var emails;
      if (this.emailOther) {
         emails = this.emailOther
      } else {
         emails = this.email
      }
      this.$http.post(this.$url.eMailUrl, {
        filePath: this.pdfUrl,
        subject:'中信建投资产配置服务-研报下载-' +this.emailTitle,
        fileName: this.emailTitle+'.pdf',
        userName: this.accountName,
        address: emails
      }).then(res => {
        if (res===1) {
          this.$message.success("发送成功！")
          this.emailOther=''
          this.$refs.modal.showConfirm=false
          this.$refs.modal.showCancle=false
          this.$refs.modal.show = false;
        }else if( res===2 ){
          this.$message.success("发送失败！")
        }
      })
      
    },
    onClick() {},
    // 复制成功时的回调函数
    onCopy(e) {
      console.log(e)
      this.$message.success("研报地址已复制到剪切板！")
    },
    // 复制失败时的回调函数
    onError(e) {
      this.$message.error("抱歉，复制失败！")
    },
    //退出登录
    goBack() {
      //sessionStorage.removeItem('accountName');
      sessionStorage.clear();
      this.$router.replace("/");
    }
  },

}
</script>
